<template>
	<view class="template">
		<view class="template_title" :style="{backgroundImage: 'url(' + TitleObj.pic + ') ' }">
			<view class="title">{{TitleObj.title}}</view>
			<view class="content">{{TitleObj.content}}</view>
			<view class="info">{{TitleObj.info}}</view>
			<view class="btn" @click="UploadVideo">{{TitleObj.btn}}</view>
		</view>
		<view class="videoList">
			<view class="video_title">我的视频列表</view>
			<view class="video" v-for="(item,index) in videoList" :key="index">
				<video id="myVideo" :src="item.user_file_url" :vslide-gesture="true" @fullscreenchange="fullscreenchange"
					:danmu-list="danmuList" style="width: 100%;height: 368rpx;border-radius: 32rpx 32rpx 0rpx 0rpx;"
					enable-danmu danmu-btn controls></video>
				<view class="bom">
					<view class="upload" @click="ViewDetails(item)">查看报告</view>
					<view class="report" @click="del(item)">删除</view>
				</view>
			</view>
		</view>
		<tn-modal v-model="show" title="警告" :content="content" :radius="40" :button="button" :maskCloseable="false"
			@click="DelModel"></tn-modal>
		<tn-modal v-model="showIos" :radius="40" :custom="true" :maskCloseable="false">
			<view class="IosModel">
				<view class="title">警告</view>
				<view class="content">{{contentIos}}</view>
				<button open-type="contact" session-from="舞界AI" show-message-card="true" send-message-title="舞界AI小程序"
					send-message-path="/pages/index/index" @click="showIos=false,show=false">
					了解详情
				</button>
			</view>
		</tn-modal>
	</view>
</template>

<script>
	import { GetSquareListAPI,DellistAPI } from "@/api/index.js"
	export default {
		name: 'TemplatePage',
		data() {
			return {
				TitleObj: {
					pic: this.$websiteUrl + 'static/web_files/dance_girl.jpg',
					weburl:this.$websiteUrl,
					title: '视频解析',
					content: '快来上传一段视频吧~',
					info: '评测考级组合，自动纠错考级动作。',
					btn: '上传视频'
				},
				videoList: [],
				show:false,
				content: '您确定要删除该视频吗？',
				DelMode:{},
				button: [{
						text: '取消',
						backgroundColor: '#7265E3',
						fontColor: '#FFFFFF'
					},
					{
						text: '确定',
						backgroundColor: '#ebebeb',
						fontColor: '#7265E3'
					}
				],
				countshow: false,
				countcontent: '',
				countbutton: [{
						text: '取消',
						backgroundColor: '#d4d4d4',
						fontColor: '#000'
					},
					{
						text: '前往充值',
						backgroundColor: '#7265E3',
						fontColor: '#FFFFFF'
					}
				],
				danmuList: [{
						text: '好漂亮',
						color: '#ff0000',
						time: 1
					},
					{
						text: '好看，赞赞赞',
						color: '#ff00ff',
						time: 3
					}
				],
			}
		},
		mounted() {
			this.GetSquareList()
		},
		computed: {
				userInfo() {
					return this.$store.getters.getUserInfo;
				}
			},
		methods: {
			async del(obj){
				this.DelMode = obj
				this.show = true
			},
			async DelModel(e) {
				switch (e.index) {
					case 0:
					this.show = false
						break;
					case 1:
						const res = await DellistAPI(this.DelMode.id)
						if (res.code === 2000) {
							wx.showToast({
								title: '删除成功',
								icon: 'success',
							})
							this.show = false
							this.GetSquareList()
						}
						break;
			
				}
			},
			ViewDetails(obj){
				const data = {
					...obj,
					dialogue: obj.answer,
					videoPath: obj.user_file_url,
				}
				const objStr = encodeURIComponent(JSON.stringify(data))
				wx.reLaunch({
					url: `/basicPage/Reporting/index?video=${objStr}`
				})
			},
			async GetSquareList(){
				const data = {
					page: 1,
					limit:999,
					call_type:2
					// query_type:''
				}
				const res = await GetSquareListAPI(data)
				if(res.code == 2000){
					this.videoList = res.data
				}
			},
			fullscreenchange() {
				// 获取 videoContext 对象
				const videoContext = wx.createVideoContext('myVideo', this);
				// 请求全屏模式
				videoContext.requestFullScreen({
					direction: 90 // 90 表示横屏，0 表示竖屏
				});
			},
			countDelModel(e){
				switch (e.index) {
					case 0:
						this.show = false
						break;
					case 1:
						wx.navigateTo({
							url: `/basicPage/Pay/index`
						})
						break;
				}
			},
			UploadVideo() {
				uni.showToast({
					title: '即将上线，敬请期待！',
					icon: 'none',
					mask: true
				});
				return
				// if (this.userInfo.member_info?.experience_video_number == 0) {
				// 	if(this.userInfo.member_info?.member_status == 0 && this.userInfo.member_info?.video_number == 0){
				// 		this.show = true
				// 		this.content = '您的体验次数已用完，请前往充值页面。'
				// 		return
				// 	} else if (this.userInfo.member_info?.member_status !== 0 && this.userInfo.member_info?.video_number == 0) {
				// 		this.show = true
				// 		this.content = '您的会员次数已用完，请前往充值页面。'
				// 		return
				// 	} else if (this.userInfo.member_info?.member_status == 1 && this.userInfo.member_info?.video_number !== 0) {
				// 		this.ShowSheet()
				// 	}
				// } else {
				// 	this.ShowSheet()
				// }
			},
			ShowSheet(){
				wx.chooseVideo({
					sourceType: ['album', 'camera'], // 允许用户从相册选择或使用相机录制
					maxDuration: 30, // 限制录制时间为15秒
					camera: 'back', // 使用后置摄像头
					success: (res) => {
						if(res.duration>60){
							uni.showToast({
								title: '视频不能超60S',
								icon: 'error',
								mask: true
							});
							return
						}else{
							const tempFilePath = res.tempFilePath;
							this.uploadToServer(tempFilePath);
						}						
					},
					fail: (err) => {
						console.log('选择视频失败：', err);
					}
				});		
			},
			uploadToServer(filePath) {
				// 假设有一个上传的API，类似于wx.uploadFile
				wx.uploadFile({
					url: this.$websiteUrl + 'api/system/file/', 
					filePath: filePath,
					name: 'file',
					success: (res) => {
					if (JSON.parse(res.data).code === 2000) {
						const data = {
							videoPath: JSON.parse(res.data).data.file_url
						}
						wx.navigateTo({
							url: `/basicPage/AIgenerate/index?video=${encodeURIComponent(JSON.stringify(data))}`
						});
					}
					},
					fail: (err) => {
						wx.showToast({
							title: '上传失败',
							icon: 'none'
						});
						console.log('上传失败：', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.template {
		padding: 0 48rpx 350rpx;
		overflow-y: auto;

		.template_title {
			position: relative;
			height: 296rpx;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			margin: 32rpx auto 0;
			overflow: visible;
			color: #FFFFFF;
			font-weight: 500;
			padding: 40rpx 0 0 46rpx;

			.title {
				font-size: 24rpx;
				color: #7FE3F0;
				line-height: 36rpx;
				text-transform: uppercase;
			}

			.content {
				line-height: 56rpx;
			}

			.info {
				width: 312rpx;
				height: 88rpx;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 44rpx;

			}

			.btn {
				position: absolute;
				bottom: 22rpx;
				right: 44rpx;
				width: 200rpx;
				height: 76rpx;
				background: #FFFFFF;
				border-radius: 28rpx;
				font-weight: 600;
				font-size: 27rpx;
				color: #7265E3;
				line-height: 76rpx;
				text-align: center;
				font-style: normal;
			}
		}

		.videoList {
			margin-top: 48rpx;
			
				.video_title {
					margin-bottom: 24rpx;
					font-weight: 500;
					font-size: 40rpx;
					color: #2D3142;
					line-height: 56rpx;
				}

			.video {

				margin-bottom: 60rpx;
				.bom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					height: 120rpx;
					margin-top: -10rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(112, 136, 210, 0.1);
					border-radius: 0rpx 0rpx 32rpx 32rpx;
					padding-right: 24rpx;

					.upload {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 182rpx;
						height: 64rpx;
						background: #E4DFFF;
						border-radius: 12rpx;
						margin-right: 16rpx;
						font-size: 24rpx;
						color: #7265E3;
					}

					.report {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 140rpx;
						height: 64rpx;
						border-radius: 12rpx;
						border: 2rpx solid #7265E3;
						font-size: 24rpx;
						color: #7265E3;
					}
				}
			}
		}
		.IosModel{
			.title{
				margin-bottom:15rpx;
				font-size: 20px;
				text-align: center;
			}
			.content{
				margin-bottom:30rpx;
			}
			button{
				background: #7265E3;
				border-radius: 28rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
</style>